<template>
  <div class="gender-chart">
    <div class="gender-display">
      <div class="gender-item male">
        <div class="gender-icon">
          <svg viewBox="0 0 24 24">
            <path d="M16,4V8H17.5L15.5,10H17V14A3,3 0 0,1 14,17A3,3 0 0,1 11,14V10H12.5L10.5,8H12V4H16M14,2H10V6H8.5L10.5,8H9V14A5,5 0 0,0 14,19A5,5 0 0,0 19,14V8H17.5L19.5,6H18V2H14Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="gender-info">
          <div class="gender-label">男性</div>
          <div class="gender-value">{{ data.male }}%</div>
        </div>
      </div>
      
      <div class="gender-item female">
        <div class="gender-icon">
          <svg viewBox="0 0 24 24">
            <path d="M12,4A6,6 0 0,1 18,10C18,12.97 15.84,15.44 13,15.92V18H15V20H13V22H11V20H9V18H11V15.92C8.16,15.44 6,12.97 6,10A6,6 0 0,1 12,4M12,6A4,4 0 0,0 8,10A4,4 0 0,0 12,14A4,4 0 0,0 16,10A4,4 0 0,0 12,6Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="gender-info">
          <div class="gender-label">女性</div>
          <div class="gender-value">{{ data.female }}%</div>
        </div>
      </div>
    </div>
    
    <div class="gender-progress">
      <div class="progress-container">
        <div class="progress-male" :style="{ width: data.male + '%' }"></div>
        <div class="progress-female" :style="{ width: data.female + '%' }"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Object,
    default: () => ({
      male: 50,
      female: 50
    })
  }
})
</script>

<style scoped>
.gender-chart {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}

.gender-display {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.gender-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.gender-item:hover {
  background: rgba(0, 255, 136, 0.15);
  transform: translateY(-2px);
}

.gender-item.male {
  background: rgba(0, 188, 212, 0.08);
  border-color: rgba(0, 188, 212, 0.3);
}

.gender-item.male:hover {
  background: rgba(0, 188, 212, 0.15);
}

.gender-item.female {
  background: rgba(255, 171, 64, 0.08);
  border-color: rgba(255, 171, 64, 0.3);
}

.gender-item.female:hover {
  background: rgba(255, 171, 64, 0.15);
}

.gender-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.gender-item.male .gender-icon {
  color: #00bcd4;
}

.gender-item.female .gender-icon {
  color: #ffab40;
}

.gender-icon svg {
  width: 20px;
  height: 20px;
}

.gender-info {
  flex: 1;
}

.gender-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.2rem;
}

.gender-value {
  font-size: 1.2rem;
  font-weight: bold;
  color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.gender-item.male .gender-value {
  color: #00bcd4;
  text-shadow: 0 0 10px rgba(0, 188, 212, 0.5);
}

.gender-item.female .gender-value {
  color: #ffab40;
  text-shadow: 0 0 10px rgba(255, 171, 64, 0.5);
}

.gender-progress {
  margin-top: 1rem;
}

.progress-container {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.progress-male {
  height: 100%;
  background: linear-gradient(90deg, #00bcd4, #00ff88);
  position: absolute;
  left: 0;
  top: 0;
  transition: width 0.3s ease;
}

.progress-female {
  height: 100%;
  background: linear-gradient(90deg, #ffab40, #ff7043);
  position: absolute;
  right: 0;
  top: 0;
  transition: width 0.3s ease;
}
</style> 